<template>
    <div>
		<div class="container">
			<el-tabs v-model="activeName" type="card" @tab-click="tabClick">
				<el-tab-pane label="乡风文明" name="tab1">
					<el-card class="box-card">
						<div class="handle-box">
							<el-input v-model="keyword" clearable placeholder="标题内容、评比结果、户主姓名" class="handle-input mr10"></el-input>
							<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
							<el-button type="success" icon="el-icon-lx-add" @click="dialogToggle1">添加</el-button>
							<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
						</div>
						<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectionChange">
							<el-table-column type="selection" width="55" align="center"></el-table-column>
							<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
							<el-table-column prop="title" label="标题"></el-table-column>
							<el-table-column prop="header" label="户主姓名"></el-table-column>
							<el-table-column prop="result" label="结果"></el-table-column>
							<el-table-column prop="evaluate" label="评比"></el-table-column>
							<el-table-column label="状态" width="140px" align="center">
							    <template slot-scope="scope">
									<el-select v-model="scope.row.status" style="width: 100px" @change="changeStatus(scope.row.id)">
									    <el-option
											v-for="item in $status"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									    </el-option>
									</el-select>
							    </template>
							</el-table-column>
							<el-table-column prop="addtime" width="160" label="添加时间"></el-table-column>
							<el-table-column label="操作" width="180" align="center">
								<template slot-scope="scope">
								    <el-button type="text" class="mr10" icon="el-icon-edit" @click="editTable(scope.row.id)">编辑</el-button>
								    <el-popconfirm
								    	confirm-button-text='确定'
								    	cancel-button-text='取消'
								    	icon="el-icon-info"
								    	icon-color="red"
								    	@confirm="delRow(scope.row.id)"
								    	title="确定删除该信息？"
								    >
								    	<el-button slot="reference" type="text" icon="el-icon-delete" :id="'del' + scope.row.id" class="red">删除</el-button>
								    </el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-tab-pane>
				
				<el-tab-pane label="家庭卫生" name="tab2">
					<el-card class="box-card">
						<div class="handle-box">
							<el-input v-model="keyword" clearable placeholder="评比结果、户主姓名" class="handle-input mr10"></el-input>
							<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
							<el-button type="success" icon="el-icon-lx-add" @click="dialogToggle2">添加</el-button>
							<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll2">批量删除</el-button>
						</div>
						<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectionChange">
							<el-table-column type="selection" width="55" align="center"></el-table-column>
							<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
							<el-table-column prop="title" label="标题"></el-table-column>
							<el-table-column prop="header" label="户主姓名"></el-table-column>
							<el-table-column prop="title" label="年份">
								<template slot-scope="scope">
									<span>{{scope.row.date}}年</span>
								</template>
							</el-table-column>
							<el-table-column prop="title" label="季度">
								<template slot-scope="scope">
									<span>第{{scope.row.quarter}}季度</span>
								</template>
							</el-table-column>
							<el-table-column prop="result" label="结果"></el-table-column>
							<el-table-column prop="hygiene" label="评比"></el-table-column>
							<el-table-column label="状态" width="140px" align="center">
							    <template slot-scope="scope">
									<el-select v-model="scope.row.status" style="width: 100px" @change="changeStatus(scope.row.id)">
									    <el-option
											v-for="item in $status"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									    </el-option>
									</el-select>
							    </template>
							</el-table-column>
							<el-table-column prop="addtime" width="160" label="添加时间"></el-table-column>
							<el-table-column label="操作" width="180" align="center">
								<template slot-scope="scope">
								    <el-button type="text" class="mr10" icon="el-icon-edit" @click="editTable2(scope.row.id)">编辑</el-button>
								    <el-popconfirm
								    	confirm-button-text='确定'
								    	cancel-button-text='取消'
								    	icon="el-icon-info"
								    	icon-color="red"
								    	@confirm="delRow2(scope.row.id)"
								    	title="确定删除该信息？"
								    >
								    	<el-button slot="reference" type="text" icon="el-icon-delete" :id="'del' + scope.row.id" class="red">删除</el-button>
								    </el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="卫生费" name="tab3">
					<el-card class="box-card">
						<div class="handle-box">
						    <el-input v-model="keyword" clearable placeholder="户主" class="handle-input mr10"></el-input>
						    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
							<el-button type="success" icon="el-icon-lx-add" @click="dialogToggle3">添加卫生费缴费</el-button>
							<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll3">批量删除</el-button>
							<el-button type="primary" icon="el-icon-lx-add"  @click="addFees">批量添加</el-button>
						</div>
						<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectionChange">
						    <el-table-column type="selection" width="55" align="center"></el-table-column>
						    <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
							<el-table-column prop="name" label="户主"></el-table-column>
<!-- 							<el-table-column prop="phone" label="电话"></el-table-column>
							<el-table-column prop="idcard" label="身份证"></el-table-column> -->
							<el-table-column prop="title" label="年份">
								<template slot-scope="scope">
									<span>{{scope.row.date}}年</span>
								</template>
							</el-table-column>
							<el-table-column prop="precapita" label="人均多少"></el-table-column>
							<el-table-column prop="people" label="家庭人数"></el-table-column>
							<el-table-column prop="money" label="实缴金额"></el-table-column>
							<el-table-column label="缴费截图" align="center">
							    <template slot-scope="scope">
									<el-image v-if="scope.row.payicon"  style="width: 60px; height: 80px; border-radius: 2px;" class="table-td-thumb" :src="$imgUrl + scope.row.payicon" :preview-src-list="[$imgUrl + scope.row.payicon]"></el-image>
									<span v-else>/</span>
								</template>
							</el-table-column>
						    <el-table-column label="状态" width="120" align="center">
						        <template slot-scope="scope">
									<el-select v-model="scope.row.status" style="width: 80%" @change="(status) => changeStatus(status,scope.row.id)">
									    <el-option
											v-for="item in $feeStatus"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									    </el-option>
									</el-select>
						        </template>
						    </el-table-column>
							<!-- <el-table-column prop="paytime" width="160" label="缴费时间"></el-table-column> -->
						    <el-table-column prop="addtime" width="160" label="添加时间"></el-table-column>
						    <el-table-column label="操作" width="150" align="center">
						        <template slot-scope="scope">
						            <el-button type="text" class="mr10" icon="el-icon-edit" @click="editTable3(scope.row.id)">编辑</el-button>
						            <el-popconfirm
						            	confirm-button-text='确定'
						            	cancel-button-text='取消'
						            	icon="el-icon-info"
						            	icon-color="red"
						            	@confirm="delRow3(scope.row.id)"
						            	title="确定删除该信息？"
						            >
						            	<el-button slot="reference" type="text" icon="el-icon-delete" :id="'del' + scope.row.id" class="red">删除</el-button>
						            </el-popconfirm>
						        </template>
						    </el-table-column>
						</el-table>
					</el-card>
				</el-tab-pane>
			</el-tabs>
			
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="pageIndex"
					:page-size="pageSize"
					:total="pageTotal"
					@current-change="pagination">
				</el-pagination>
			</div>
		</div>
		<vCivilization ref="vCivilization" @dialogToggle1="dialogToggle1" @getCivilization="getCivilization"></vCivilization>
		<vHygiene ref="vHygiene" @dialogToggle2="dialogToggle2" @getHygiene="getHygiene"></vHygiene>
		<vHygieneFee ref="vHygieneFee" @dialogToggle3="dialogToggle3" @getHygieneFee="getHygieneFee"></vHygieneFee>
		<vHygieneMore ref="vHygieneMore" @dialogToggle4="addFees"></vHygieneMore>
    </div>
	
</template>

<script>
import vCivilization from '../vPage/vCivilization.vue'
import vHygiene from '../vPage/vHygiene.vue'
import vHygieneFee from '../vPage/vHygieneFee.vue'
import vHygieneMore from '../vPage/vHygieneMore.vue'
export default {
    name: 'Civilization',
	components: {
		vCivilization,
		vHygieneFee,
		vHygiene,
		vHygieneMore
	},
    data() {
        return {
			activeName: 'tab1',
            keyword: '',
			date: '',
            tableData: [],
            dialog: false,
			delIds: [],
			pageIndex: 1,
			pageSize: 10,
			pageTotal: 0,
        };
    },
    created() {
		this.getCivilization()
    },
    methods: {
        getCivilization() {
			let t = this
			t.$apiPost('Civilization/lists', {keyword: this.keyword, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
        },  
		getHygiene () {
			let t = this
			console.log('22222')
			t.$apiPost('Hygiene/lists', {keyword: this.keyword, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
		},
		getHygieneFee(){
			let t = this
			t.$apiPost('HygieneFee/lists', {keyword: this.keyword, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
		},
		tabClick (e) {
			this.keyword = ''
			this.pageIndex = 1
			this.tableData = []
			if(e.index == "0"){
				this.getCivilization()
			} else if(e.index == "1") {
				this.getHygiene()
			}else{
				this.getHygieneFee()
			}
			console.log(e)
			this.activeName = e.name
		},
		dialogToggle1 (id) {
			this.$refs.vCivilization.id = id
			this.$refs.vCivilization.dialog = !this.$refs.vCivilization.dialog
		},
		dialogToggle2 (id) {
			this.$refs.vHygiene.id = id
			this.$refs.vHygiene.dialog = !this.$refs.vHygiene.dialog
		},
		dialogToggle3(){
			// this.$refs.vHygieneFee.id = id
			this.$refs.vHygieneFee.dialog = !this.$refs.vHygieneFee.dialog
		},
		addFees(){
			this.$refs.vHygieneMore.dialog = !this.$refs.vHygieneMore.dialog
		},
		changeStatus (status,id) {
			if(this.activeName == 'tab1'){
				this.$updateStatus('Index/updateStatus', {model: 'Civilization', id: id});
			} else if(this.activeName == 'tab2'){
				this.$updateStatus('Index/updateStatus', {model: 'Hygiene', id: id});
			}else{
				this.$apiPost('HygieneFee/updateStatus', {id: id,status:status}).then(res => {
					if(res.code == 1) {
						this.$message.success(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}
		},
		handleQuery () {
			this.pageIndex = 1
			if(this.activeName == 'tab1'){
				this.getCivilization()
			} else if(this.activeName == 'tab2'){
				this.getHygiene()
			}else{
				this.getHygieneFee()
			}
		},
		editTable (id) {
			this.$apiPost('Civilization/infos', {id: id}).then(res => {
				if(res.code == 1) {
					this.$refs.vCivilization.formData = res.data
					this.dialogToggle1()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		editTable2 (id) {
			this.$apiPost('Hygiene/infos', {id: id}).then(res => {
				if(res.code == 1) {
					this.$refs.vHygiene.formData = res.data
					this.dialogToggle2()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		editTable3 (id) {
			this.$apiPost('HygieneFee/infos', {id: id}).then(res => {
				if(res.code == 1) {
					this.$refs.vHygieneFee.formData = res.data
					this.dialogToggle3()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		delRow (id) {
			this.$apiPost('Civilization/delOne', {id: id}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getCivilization()
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		delRow2 (id) {
			this.$apiPost('Hygiene/delOne', {id: id}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getHygiene()
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		delRow3 (id) {
			this.$apiPost('HygieneFee/delOne', {id: id}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getHygieneFee()
					this.$message(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		selectionChange(e){
			let ids = []
			if(e.length > 0) {
				for(let i in e){
					ids.push(e[i].id)
				}
				this.delIds = ids
			} else {
				this.delIds = e
			}
		},
		delAll () {
			if(this.delIds.length == 0) {
				return this.$message({
					message: '未选择删除信息!',
					type: 'warning'
				})
			}
			this.$confirm('是否删除选择的?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$apiPost('getCivilization/delAll', {ids: this.delIds}).then(res => {
					if(res.code == 1) {
						this.pageIndex = 1
						this.getEmployed()
						this.$message.success(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {         
			})
			
		},
		delAll3 () {
			if(this.delIds.length == 0) {
				return this.$message({
					message: '未选择删除信息!',
					type: 'warning'
				})
			}
			this.$confirm('是否删除选择的?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$apiPost('HygieneFee/delAll', {ids: this.delIds}).then(res => {
					if(res.code == 1) {
						this.pageIndex = 1
						this.getHygieneFee()
						this.$message.success(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {         
			})
			
		},
		delAll2 () {
			if(this.delIds.length == 0) {
				return this.$message({
					message: '未选择删除信息!',
					type: 'warning'
				})
			}
			this.$confirm('是否删除选择的?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$apiPost('Hygiene/delAll', {ids: this.delIds}).then(res => {
					if(res.code == 1) {
						this.pageIndex = 1
						this.getHygiene()
						this.$message.success(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {         
			})
			
		},
		pagination (e) {
			this.pageIndex = e
			if(this.activeName == 'tab1') {
				this.getCivilization()
			} else if(this.activeName == 'tab2'){
				this.getHygiene()
			}else{
				this.getHygieneFee()
			}
		}
    }
};
</script>
<style scoped>
.goNew{
	color: #2e6bd9;
	cursor: pointer;
}
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 200px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr5{
	margin-right: 1px;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
